<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>期限理财</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
  <!-- 必须先引入vue，  后使用element-ui -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item><a @click="cut('Main')">首页</a></el-breadcrumb-item>
    <el-breadcrumb-item><a @click="cut('Money')">个人理财</a></el-breadcrumb-item>
    <el-breadcrumb-item><a @click="cut('TermFinancial')">期限理财</a></el-breadcrumb-item>
  </el-breadcrumb>
  <h2><span>期限理财推荐</span></h2>
  <hr>
  <template>
    <div class="table">
      <el-table
              :data="termList"
              style="width: 100%">
        <el-table-column
                prop="t_id"
                label="序号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="t_name"
                label="产品名称"
        >
        </el-table-column>
        <el-table-column
                prop="t_income"
                label="收益方式"
        >
        </el-table-column>
        <el-table-column label="七日年化收益率">
          <template slot-scope="scope">
            {{scope.row.t_yield+'%'}}
          </template>
        </el-table-column>
        <el-table-column label="起投金额">
          <template slot-scope="scope">
            {{scope.row.t_amount+'元'}}
          </template>
        </el-table-column>
        <el-table-column label="投资期限">
          <template slot-scope="scope">
            {{scope.row.investmentHorizon.h_day+'天'}}
          </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="150">
          <template slot-scope="scope">
            <el-button  @click="add(scope.row.t_id)" class="btn btn-info" data-toggle="modal" data-target="#myModal"  style="background-color: #26BABD">$ 投资</i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- total:总条数 prev:上一页  pager:当前页 next:上一页 jumper 前往第几页-->
      <el-pagination
              background
              layout="total, prev, pager, next, jumper"
              :total="total"
              :current-page="currentPage"
              :page-size="pageSize"
              @size-change="handleSizeTerm"
              @current-change="handleCurrentTerm">
      </el-pagination>
    </div>
  </template>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">投资信息</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <form>
          <div class="modal-body input-group">
            <div class="container mt-3">
              <div class="input-group mb-3" hidden>
                <div class="input-group-prepend">
                  <span class="input-group-text">序号：</span>
                </div>
                <input type="text" class="form-control" placeholder="序号：" v-model="terms.t_id" name="t_id" readonly>
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">产品名称：</span>
                </div>
                <input type="text" class="form-control" placeholder="产品名称：" v-model="terms.t_name" name="t_name" readonly>
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">收益方式：</span>
                </div>
                <input type="text" class="form-control" placeholder="收益方式：" v-model="terms.t_income" name="t_income" readonly>
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">七日年化收益率：</span>
                </div>
                <input type="text" class="form-control" placeholder="七日年化收益率：" v-model="terms.t_yield"  name="t_yield" readonly>%
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">起投金额：</span>
                </div>
                <input type="text" id="camount" class="form-control" placeholder="起投金额：" v-model="terms.t_amount"  name="t_amount" readonly>元
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">投资金额：</span>
                </div>
                <input type="text" id="amount" class="form-control" placeholder="投资金额：" name="amount" v-model="amount" >元（投资金额不能低于起投金额）
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">投资期限：</span>
                </div>
                <input type="text" class="form-control" placeholder="投资期限：" v-model="inv.h_day"  name="h_day" readonly>天
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">选定银行卡：</span>
                </div>
                <select id="res">
                  <option>---请选择---</option>
                  <option v-for="b in bank"  name="b_name"  :value="b.bank_id">{{b.bank.b_name}}({{b.bank_card}})</option>
                </select>
              </div>
            </div>
          </div>
          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-info" @click="addTerm(terms.t_id,amount,terms.t_name)">投资</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
<style>
  .el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
  }
  .el-card{
    box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>

<script type="text/javascript">
  new Vue( {
    el:"#app",
    data:{
      amount:'',
      currentPage:1, //初始页
      pageSize:5,    //    每页的数据
      total:1,
      termList: [],
     term:{
        t_id:'',
        amount:'',
        t_name:''
      },
      TermId:{
        t_id:''
      },
      terms:{},
      inv:{},
      bank:[],
      personUser:{}
    },
    methods: {
      add(t_id){
        var termId = this;
        this.TermId.t_id=t_id;
        axios.post('/person/selectTermById/',"t_id="+t_id).then(res=>{
          termId.terms=res.data.termFinancial;
          termId.inv=res.data.Invest;
          termId.bank=res.data.bank;
          termId.personUser=res.data.personUser;
          for(let i=0;i<this.bank.length;i++) {
            let cardName = this.bank[i].bank_card;
            let cardLenth = cardName.length;
            let name = cardName.substring(cardLenth - 4, cardLenth.length);
            this.bank[i].bank_card=name;
          }
        })
      },
      handleSizeTerm(pageSize){
        this.pageSize = pageSize;
        // 点击每页显示的条数时，显示第一页
        this.showData(this.currentPage,this.pageSize)
      },

      showData(currentPage,pageSize){
        var term = this;
        axios.get("/person/getTermList/"+currentPage+"/"+pageSize).then(res=>{
          console.log(res);
          term.termList = res.data.list;
          term.total = res.data.total;
          console.log(res.data.list);
        })
      },
      handleCurrentTerm(currentPage){
        this.currentPage = currentPage;
        // 点击每页显示的条数时，显示第一页
        this.showData(this.currentPage,this.pageSize);
      },
      addTerm(t_id,amount,t_name){
        var msg = "您真的确定要投资吗？\n\n请确认！";
        if (confirm(msg)==true) {
          let c_amounts=document.getElementById("camount").value;
          let amounts=document.getElementById("amount").value;
          let obj = document.getElementById("res"); //定位id
          let index = obj.selectedIndex; // 选中索引
          let bid = obj.options[index].value; // 选中值
          if(amounts==null && amounts==''){
            alert("投资金额不能为空！！！");
            return false;
          }
          if(amounts<c_amounts){
            alert("投资金额不能小于起投金额");
            return false;
          }
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputErrorMessage: '密码格式不正确',
                inputPlaceholder:'password',
                inputType:'password'
            }).then(({ value }) => {
                if(value!=null&&value==this.personUser.deal_pwd){
                    alert("卖入成功！！！");
                  window.location.href="TermFinancial.html";
                    return true;
                }else {
                    alert("密码不正确！！！");
                    return false;
                }
            })
            this.term.t_id=t_id;
            this.term.amount=amount;
            this.term.t_name=t_name;
          axios.post('/person/selectTermMoneys', "t_id=" + t_id + "&amount=" + amount + "&t_name=" + t_name+"&bank_id="+bid).then(res => {
            console.log(res.data)
          })
        }else{
          alert("卖入失败！！！");
          window.location.href="TermFinancial.html";
          return false;
        }
      }
    },created() {
      this.showData(1, 5)
    }
  })
</script>
</html>